<template>
	<view class="container">
		<!-- 会员权益 -->
		<view class="bg">
			<!-- 会员卡信息 -->
			<view class="vip-card">
				<view class="vip-header">
					<text class="vip">
						vip
					</text>
					<text class="vip-type">银卡会员</text>
					<view class="vip-amount">
						<text class="vip-amount-text">储值卡金额：</text><text class="vip-amount-number">0元</text>
					</view>
					<text class="vip-growth">成长值：0</text>
				</view>
				<view class="vip-upgrade-btn">去升级 <image src="../../static/logo.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="line">
			<u-loadmore loadmoreText="银卡会员拥有特权" color="#7C7F80" fontSize="30" lineColor="#7C7F80" :dashed="false" line />
		</view>

		<!-- 会员特权 -->
		<view class="privileges">
			<view class="privilege-item">
				<image class="privilege-icon" src="../../static/logo.png" 3.png"></image>
				<text class="privilege-desc">100元大礼包</text>
			</view>
			<view class="privilege-item">
				<image class="privilege-icon" src="../../static/logo.png" 3备份 2.png"></image>
				<text class="privilege-desc">全项目95折</text>
			</view>
		</view>
		<view class="line2">
			<u-loadmore loadmoreText="项目卡权益" color="#7C7F80" fontSize="30" lineColor="#7C7F80" :dashed="false" line />
		</view>
		

		<!-- 项目卡权益 -->
		<view class="card-benefits">
			<view class="card-item">
				<image class="card-image" src="../../static/logo.png"></image>
				<view class="card-info">
					<view class="card-title">按摩 脊柱侧弯 正骨调理</view>
					<view class="card-subtitle">共24次，剩余10次</view>
				</view>
				<view class="book-btn"><view class="_text">去预约</view> </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 若有需要的数据，可以在此定义
			};
		}
	};
</script>

<style lang="less" scoped>
	.bg {
		width: 100%;
		height: 356rpx;
		background: #C19C55;
		border-radius: 0 0 15% 15%;
		position: relative;

	}
	.line{
		margin-top: 150rpx;
	}
	.line2{
		margin-top: 66rpx;
		margin-bottom: 32rpx;
	}
	.vip-card {
		width: 646rpx;
		height: 298rpx;
		display: flex;
		background-image: url('../../static/logo.png');
		background-repeat: no-repeat;
		background-position: center center;
		font-size: 100%;
		border-radius: 20rpx;
		margin-bottom: 30rpx;
		position: absolute;
		overflow: hidden;
		top: 188rpx;
		left: 52rpx;
	}

	.vip-header {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding-left: ;

		.vip {
			width: 28rpx;
			height: 26rpx;
			margin-top: 10rpx;
			margin-left: 48rpx;
			font-weight: 400;
			font-size: 18rpx;
			color: #FFFFFF;
		}

		.vip-type {
			width: 162rpx;
			height: 52rpx;
			font-family: HelloFont, HelloFont;
			font-weight: 900;
			font-size: 40rpx;
			color: #767676;
			line-height: 52rpx;
			text-align: left;
			font-style: normal;
			margin-left: 52rpx;
			margin-top: 22rpx;
		}

		.vip-amount {
			margin-left: 56rpx;
			margin-top: 8rpx;

			.vip-amount-text {
				height: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #444444;
				line-height: 34rpx;
				text-align: left;
				font-style: normal;
			}

			.vip-amount-number {
				font-size: 24rpx;
			}
		}

		.vip-growth {
			width: 112rpx;
			height: 34rpx;
			font-family: PingFangSC, PingFang SC;
			color: rgba(68, 68, 68, 0.6);
			font-weight: 400;
			font-size: 24rpx;
			line-height: 34rpx;
			margin-left: 56rpx;
			margin-top: 54rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.vip-upgrade-btn {
		margin-top: 198rpx;
		margin-right: 54rpx;
		display: flex;
		width: 170rpx;
		height: 44rpx;
		font-size: 22rpx;
		padding-left: 26rpx;
		color: #444444;
		line-height: 44rpx;
		background: linear-gradient(101deg, #FFFFFF 0%, #D9D9D9 100%);
		border-radius: 22rpx;

		image {
			margin-top: 16rpx;
			margin-left: 6rpx;
			width: 16rpx;
			height: 16rpx;
		}
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		margin: 20rpx 0;
		text-align: center;
		margin-top: 100rpx;
	}

	.privileges {
		display: flex;
		margin-bottom: 30rpx;
	}

	.privilege-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 22rpx;
		margin-right: 30rpx;
		margin-top: 66rpx;
	}

	.privilege-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}

	.privilege-desc {
		font-size: 28rpx;
		color: #666;
	}

	.card-benefits {
		width: 720rpx;
		height: 188rpx;
		background: linear-gradient( 153deg, #FFFAED 0%, #FFFFFF 100%);
		box-shadow: 0rpx 4rpx 14rpx 0rpx #ECEBEB;
		border-radius: 20rpx;
		margin-left: 16rpx;
	}

	.card-item {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.card-image {
		width: 136rpx;
		height: 136rpx;
		border-radius: 15rpx;
		margin-right: 20rpx;
		margin-top: 24rpx;
		margin-left: 28rpx;
	}

	.card-info {
		flex: 1;
	}

	.card-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.card-subtitle {
		width: 258rpx;
		height: 34rpx;
		background: #F6EEE1;
		border-radius: 6rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #C29E58;
		padding-left: 12rpx;
	}

	.book-btn {
		width: 122rpx;
		height: 188rpx;
		background: #C19C55;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		._text{
			width: 20rpx;
			height: 108rpx;
			font-family: SourceHanSansCN, SourceHanSansCN;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 36rpx;
			text-align: left;
			font-style: normal;
			margin-left: 48rpx;
			margin-top: 32rpx;
		}
	}
</style>